<template>
  <a-modal
    title="上传图片"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    :footer="null"
    @cancel="cancelHandel">
    <a-row>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
          :fixedNumber="fixedNumber"
          outputType="png"
        >
        </vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" class="avatar-upload-preview" :style="previewStyle">
        <div :style="previews.div">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :lg="2" :md="2">
        <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
          <a-button icon="upload">选择图片</a-button>
        </a-upload>
      </a-col>
      <a-col :lg="{span: 1, offset: 2}" :md="2">
        <a-button icon="plus" @click="changeScale(1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="minus" @click="changeScale(-1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="undo" @click="rotateLeft"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="redo" @click="rotateRight"/>
      </a-col>
      <a-col :lg="{span: 2, offset: 6}" :md="2">
        <a-button type="primary" @click="finish('blob')">保存</a-button>
      </a-col>
    </a-row>
  </a-modal>

</template>
<script>
import { VueCropper } from 'vue-cropper'
import { uploadImg } from '@/api/data.js'

export default {
  components: {
    VueCropper
  },
  props: {
    autoCropWidth: {
      type: Number,
      default: 200
    },
    autoCropHeight: {
      type: Number,
      default: 200
    }
  },
  data () {
    return {
      filename: '',
      visible: false,
      id: null,
      confirmLoading: false,
      fileList: [],
      uploading: false,
      options: {
        img: '',
        autoCrop: true,
        autoCropWidth: this.autoCropWidth,
        autoCropHeight: this.autoCropHeight,
        fixedBox: false
      },
      previews: {},
      fixedNumber: [1, 1],
      previewStyle: {}
    }
  },
  methods: {
    edit (id) {
      this.visible = true
      this.id = id
      /* 获取原始头像 */
    },
    close () {
      this.id = null
      this.visible = false
    },
    cancelHandel () {
      this.close()
    },
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },

    // uploadImg (e, num) {
    //   // 上传图片
    //   // this.option.img
    //   var file = e.target.files[0]
    //   if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
    //     alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
    //     return false
    //   }
    //   var reader = new FileReader()
    //   reader.onload = (e) => {
    //     let data
    //     if (typeof e.target.result === 'object') {
    //       // 把Array Buffer转化为blob 如果是base64不需要
    //       data = window.URL.createObjectURL(new Blob([e.target.result]))
    //     } else {
    //       data = e.target.result
    //     }
    //     if (num === 1) {
    //       this.options.img = data
    //     }
    //   }
    //   // 转化为base64
    //   // reader.readAsDataURL(file)
    //   // 转化为blob
    //   reader.readAsArrayBuffer(file)
    // },

    beforeUpload (file) {
      const reader = new FileReader()
      // 把Array Buffer转化为blob 如果是base64不需要
      // 转化为base64
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.options.img = reader.result
        this.filename = file.name
      }
      // 转化为blob
      // reader.readAsArrayBuffer(file)

      return false
    },

    // 上传图片（点击上传按钮）
    finish (type) {
      const _this = this
      const formData = new FormData()
      // 输出
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          const img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
          formData.append('file', data, this.filename)
          uploadImg(formData).then((response) => {
            // var res = response.data
            if (response.status === 'success') {
              _this.imgFile = ''
              // _this.headImg = res.realPathList[0] // 完整路径
              // _this.uploadImgRelaPath = res.relaPathList[0] // 非完整路径
              _this.$message.success('上传成功')
              this.visible = false
              this.$emit('ok', this.id, response.url)
            }
          })
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    // okHandel () {
    //   const vm = this

    //   vm.confirmLoading = true
    //   setTimeout(() => {
    //     vm.confirmLoading = false
    //     vm.close()
    //     vm.$message.success('上传头像成功')
    //   }, 2000)
    // },

    realTime (data) {
      var previews = data
      var h = 0.5

      this.previewStyle = {
        width: previews.w + 'px',
        height: previews.h + 'px',
        overflow: 'hidden',
        zoom: h
      }

      this.previews = data
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    border-radius: 0%;
    box-shadow: 0 0 4px #ccc;
  }
</style>
